<template>
    <div class="AddPatient">
        <div>
            <h2>患者管理</h2>
            <div class="operatingBox">
                <el-button type="info" icon="el-icon-arrow-left" size="small" @click="goBack">返回</el-button>
            </div>

            <div class="formBox">
                <el-form size="small" class="addForm" :model="formData" ref="formData" >
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item class="select">
                                <span slot="label">
                                    <span class="labelText">类型</span>
                                </span>
                                <el-select v-model="formData.type" placeholder="请选择" style="width: 100%;">
                                    <!-- <template slot-scope="scope">
                                        <el-option v-if="scope.row.formData.type==1" value="1">公海</el-option>
                                        <el-option v-if="scope.row.formData.type==0" value="0">私海</el-option>
                                    </template> -->
                                    <el-option label="公海" value="1"></el-option>
                                    <el-option label="私海" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">患者名称</span>
                                </span>
                                <el-input v-model="formData.name"></el-input>
                            </el-form-item>
                            <el-form-item prop="age">
                                <span slot="label">
                                    <span class="labelText">患者年龄</span>
                                </span>

                                <el-input v-model.number="formData.age"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">出生地</span>
                                </span>
                                <el-input v-model="formData.birthPlace"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">患者职业</span>
                                </span>
                                <el-input v-model="formData.job"></el-input>
                            </el-form-item>
                            <el-form-item prop="idCard">
                                <span slot="label">
                                    <span class="labelText" maxlength="18">身份证号</span>
                                </span>
                                <el-input v-model="formData.idCard"></el-input>
                            </el-form-item>
                            <el-form-item prop="phone">
                                <span slot="label">
                                    <span class="labelText">手机号码</span>
                                </span>
                                <el-input v-model="formData.phone" maxlength="11"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">状态</span>
                                </span>
                                <el-select v-model="formData.status" placeholder="请选择" style="width: 100%;">
                                    <el-option label="有效" value="0"></el-option>
                                    <el-option label="无效" value="1"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">患者性别</span>
                                </span>
                                <el-select v-model="formData.sex" placeholder="请选择" style="width: 100%;">
                                    <el-option label="男" value="1"></el-option>
                                    <el-option label="女" value="0"></el-option>
                                </el-select>

                            </el-form-item>
                            <el-form-item prop="birth">
                                <span slot="label">
                                    <span class="labelText">出生年月</span>
                                </span>
                                <!-- <el-date-picker v-model="formData.birth" type="date" placeholder="选择日期"
                                    style="width: 100%;">
                                </el-date-picker> -->
                                <el-input v-model="formData.birth" placeholder="2020-01-01" ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">患者民族</span>
                                </span>
                                <el-input v-model="formData.race"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">婚姻状况</span>
                                </span>
                                <el-input v-model="formData.maritalStu"></el-input>
                            </el-form-item>
                            <el-form-item prop="medicareNum">
                                <span slot="label">
                                    <span class="labelText">医保卡号</span>
                                </span>
                                <el-input v-model.number="formData.medicareNum" maxlength="11"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">患者备注</span>
                                </span>
                                <el-input v-model="formData.remark"></el-input>
                            </el-form-item>


                        </el-col>
                    </el-row>
                    <hr>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">联系人</span>
                                </span>
                                <el-input v-model="formData.contact"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">Email</span>
                                </span>
                                <el-input v-model="formData.email"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">手机号码</span>
                                </span>
                                <el-input v-model="formData.contactPhone" maxlength="11"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">微信</span>
                                </span>
                                <el-input v-model="formData.wechat"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <hr>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">国家</span>
                                </span>
                                <el-input v-model="formData.country"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">市</span>
                                </span>
                                <el-input v-model="formData.city"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">地址</span>
                                </span>
                                <el-input v-model="formData.address"></el-input>
                            </el-form-item>

                        </el-col>
                        <el-col :span="12">
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">省</span>
                                </span>
                                <el-input v-model="formData.province"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">区</span>
                                </span>
                                <el-input v-model="formData.district"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <span slot="label">
                                    <span class="labelText">邮编</span>
                                </span>
                                <el-input v-model="formData.zip"></el-input>
                            </el-form-item>

                        </el-col>
                    </el-row>
                    <hr>
                    <el-form-item class="btnBox">
                        <el-button type="primary" size="small" @click="savePatient">保存</el-button>
                        <el-button type="info" size="small" @click="goBack">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>


        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    name: 'EditPatient',
    computed: {
        ...mapState("editPatient", ['title', 'rowData'])
    },
    mounted() {

        this.formData = this.rowData
        if (this.formData.sex == 0) {
            this.formData.sex = "女"
        } else {
            this.formData.sex = "男"
        }
        if (this.formData.type == 1) {
            this.formData.type = "公海"
        } else {
            this.formData.type = "私海"
        }
        if (this.formData.status == 0) {
            this.formData.status = "有效"
        } else {
            this.formData.status = "无效"
        }

        if (this.formData.maritalStu == 1) {
            this.formData.maritalStu = "已婚"
        } else {
            this.formData.maritalStu = "未婚"
        }
        console.log("this.rowData---", this.rowData);
        // }
    },
    data() {
        return {
            //表单数据
            formData: {
                type: "私海",
                status: "有效",
                address: "",
                age: "",
                birth: "",
                birthPlace: "",
                city: "",
                contact: "",
                contactPhone: "",
                country: "",
                // description: "",//患者描述
                district: "",
                email: "",
                // id: "",
                idCard: "",
                job: "",
                maritalStu: "",
                medicareNum: "",
                name: "",
                phone: "",
                province: "",
                race: "",
                remark: "",
                sex: "男",
                wechat: "",
                zip: "",
                user_id: 1,

            },
        };
    },


    methods: {

        //返回按钮
        goBack() {
            this.$router.push("/patient/paManage")
        },

        //保存按钮 -----
        async savePatient() {
            // console.log(this.formData);
            if (this.formData.sex == "女") {
                this.formData.sex = 0
            } else if(this.formData.sex == "男"){
                this.formData.sex = 1
            }
            if (this.formData.type == "公海") {
                this.formData.type = 1
            } else if(this.formData.type == "私海") {
                this.formData.type = 0
            }
            if (this.formData.status == "有效") {
                this.formData.status = 0
            } else if(this.formData.status == "无效"){
                this.formData.status = 1
            }

            if (this.formData.maritalStu == "已婚") {
                this.formData.maritalStu = 1
            } else {
                this.formData.maritalStu = 0
            }
            this.formData.user_id=sessionStorage.getItem("useID");
            let res = await this.$api.patients.editPatient(this.formData)
            console.log(res);
            if (res.data.code === 200) {
                //跳转到列表页面
                this.$router.push('/patient/paManage')
                //提示
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            } else {
                this.$message.error('修改失败');
            }

        }
    }

};
</script>

<style scoped>
.AddPatient {
    padding-bottom: 10px;
}

h2 {
    margin: 15px;

}

.select {
    display: flex;
    flex-direction: column;
}

.operatingBox {
    background-color: white;
    margin: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #ccc;
    border-radius: 5px;
}

.el-button {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.formBox {
    background-color: white;
    margin-left: 15px;
    margin-right: 15px;

}

.el-form {
    margin: 15px;

}


.labelText {
    text-align: left;
    float: left;
    font-size: 14px;
    font-weight: 600;
    color: black;
}

/* .selectBox {
    display: flex;
    flex-direction: column;
} */

.line {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 700;
    border-bottom: 2px solid rgb(117, 116, 116);
}

.btnBox {
    margin-top: 20px;
    padding-bottom: 20px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
</style>